<template>
  <div>
    <div class="tab" style="display: flex;justify-content: space-around;margin-top: 30px">
      <div class="tab" style="display: flex;align-items: center">
        <div>推荐标题</div>
        <div class="tabSearch" style="display: flex;">
          <el-input v-model="titleData" style="margin: 0 10px ;" placeholder="请输入推荐标题" />
          <el-button type="primary" icon="el-icon-search" @click="searchExpert">搜索</el-button>
        </div>
      </div>
      <div style="display: flex;align-items: center" @click="showExpertSelector = true">
        <div>选择专家</div>
        <el-select v-model="inputName" style="margin: 0 10px;pointer-events: none;" placeholder="选择专家" @change="handleChange">
          <el-option v-for="item in expertDataList" :key="item.id" :label="item.nickname" :value="item.id" />
        </el-select>
      </div>
      <div style="display: flex;align-items: center">
        <div>选择分类</div>
        <el-select v-model="fbData" style="margin: 0 10px ;" placeholder="选择分类" @change="handleChangeType">
          <el-option v-for="item in fbAll" :key="item.id" :label="item.nickname" :value="item.id" />
        </el-select>
      </div>
      <div style="display: flex;align-items: center">
        <div>是否不中退</div>
        <el-select v-model="ynData" style="margin: 0 10px ;" placeholder="选择分类" @change="handleChangeYesOrNo">
          <el-option v-for="item in yOrN" :key="item.id" :label="item.nickname" :value="item.id" />
        </el-select>
      </div>
    </div>
    <div class="addBtn">
      <el-button type="primary" @click="handleButtonAdd()">+ 添加</el-button>
      <el-dialog title="添加" :visible.sync="dialogTableVisible" :before-close="closeForm" :close-on-click-modal="false" :close-on-press-escape="false">
        <el-dialog width="50%" title="赛事选择" :visible.sync="innerVisible" append-to-body :before-close="closeFormData">
          <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
            <el-form-item label="主队搜索">
              <el-input
                v-model="inputData"
                style="width: 200px;"
                placeholder="输入队伍名称搜索"
                @input="getInput"
              />
            </el-form-item>
            <el-form-item label="预测分类">
              <el-radio-group v-model="ruleForm.yuce" @change="changeYuce">
                <el-radio v-for="(item, index) in yuce" :key="index" :label="item.id">{{ item.text
                }}</el-radio>
              </el-radio-group>
            </el-form-item>

          </el-form>
          <div style="display: flex;flex-wrap: wrap">
            <div v-for="(item, index) in dataList" :key="index">
              <el-radio-group v-model="radio1" @change="changeMatch">
                <el-radio-button :label="item" style="margin-left: 10px;margin-bottom: 10px">
                  <div style="margin: 10px;display: flex;flex-direction: column;align-items: center">
                    <span>{{ item.competition_name }} {{ timestampToTime(item.match_time) }}</span>
                    <!-- <span>{{ item.home_team_name }} VS {{ item.away_team_name }}</span> -->
                    <div v-if="ruleForm.category==1">
                      <span>{{ item.home_team_name }} VS {{ item.away_team_name }}</span>
                    </div>
                    <div v-if="ruleForm.category==2">
                      <span>{{ item.away_team_name }} VS {{ item.home_team_name }}</span>
                    </div>
                  </div>
                </el-radio-button>
              </el-radio-group>
              <el-dialog
                title="选择结果"
                :visible.sync="open"
                width="500px"
                class="dialogLand"
                :before-close="closeFormOpen"
                append-to-body
              >
                <div style="display: flex;flex-direction: column;">
                  <div style="margin-bottom: 14px">
                    <!-- <span style="margin-left: 10px;">{{ oodMatchData.home_team_name }} VS {{ oodMatchData.away_team_name }}</span> -->
                    <div v-if="ruleForm.category==1">
                      <span>{{ oodMatchData.home_team_name }} VS {{ oodMatchData.away_team_name }}</span>
                    </div>
                    <div v-if="ruleForm.category==2">
                      <span>{{ oodMatchData.away_team_name }} VS {{ oodMatchData.home_team_name }}</span>
                    </div>
                  </div>
                  <div style="margin-left: 10px">
                    <div style="display: flex;margin-bottom: 10px;">
                      <el-checkbox-group v-model="checkboxGroup1" :max="max" @change="changeOdds">
                        <div v-if="typeData == 1">
                          <div>
                            <el-checkbox-button
                              v-for="(itemsss, index) in oddsDataList[0]"
                              :key="index"
                              :label="itemsss"
                              @change="changeOdds6(itemsss)"
                            >
                              <div>{{ itemsss.label }}</div>
                              <div>{{ itemsss.value }}</div>
                            </el-checkbox-button>
                          </div>
                          <div>
                            <el-checkbox-button
                              v-for="(itemss, index1) in oddsDataList[1]"
                              :key="index1"
                              :label="itemss"
                              @change="changeOdds6(itemss)"
                            >
                              <div>{{ itemss.label }}</div>
                              <div>{{ itemss.value }}</div>
                            </el-checkbox-button>
                          </div>

                        </div>
                        <div v-else>
                          <el-checkbox-button
                            v-for="(items, index) in oddsDataList[0]"
                            :key="index"
                            :label="items"
                            @change="changeOdds7(items)"
                          >
                            <div>
                              <span>{{ items.label }}</span>
                              <span>{{ items.value }}</span>
                            </div>
                          </el-checkbox-button>
                        </div>
                      </el-checkbox-group>
                    </div>
                  </div>
                </div>
                <div style="text-align: right;">
                  <el-button @click="clickClose">取消</el-button>
                  <el-button type="primary" @click="clickClose">确认</el-button>
                </div>
              </el-dialog>

            </div>
          </div>
          <div style="text-align: right;">
            <el-button @click="clickDelete">取消</el-button>
            <el-button type="primary" @click="ConfirmOods">确认</el-button>
          </div>
        </el-dialog>
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="分类标签" prop="name">
            <el-select v-model="ruleForm.category" placeholder="请选择" @change="handleSelectChange">
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.label"
                :value="item.valuess"
              />
            </el-select>
          </el-form-item>
          <div @click="showExpertSelector = true">
            <el-form-item label="选择老师" prop="name">
              <el-select v-model="ruleForm.expert_id" style="pointer-events: none;" placeholder="请选择" @change="selectChangeExpert">
                <el-option
                  v-for="(item, index) in expertDataList"
                  :key="index"
                  :label="item.nickname"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </div>

          <el-form-item label="串子分类">
            <el-radio-group v-model="ruleForm.pass_lx">
              <el-radio :label="1">单场</el-radio>
              <el-radio :label="2">2串1</el-radio>
              <el-radio :label="3">3串1</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="显示类型">
            <el-radio-group v-model="ruleForm.show_lx">
              <el-radio :label="1">首页优选</el-radio>
              <el-radio :label="2">近期连红</el-radio>
              <el-radio :label="3">近期爆棚</el-radio>
              <el-radio :label="4">今日热卖</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="赛事添加">
            <div v-if="fanxian.length != 0">
              <div v-for="(items, index) in fanxian" :key="index">
                <!-- <span>{{ items.home_team_name }}VS{{ items.away_team_name }}</span> -->
                <div v-if="ruleForm.category==1">
                  <span>{{ items.home_team_name }} VS {{ items.away_team_name }}</span>
                </div>
                <div v-if="ruleForm.category==2">
                  <span>{{ items.away_team_name }} VS {{ items.home_team_name }}</span>
                </div>
                <div v-for="(item, index) in items.odds" :key="index">
                  <span>{{ item.label }}</span>
                  <span>{{ item.value }}</span>
                </div>
              </div>
            </div>
            <el-button type="primary" icon="el-icon-circle-plus-outline" @click="clickType">添加</el-button>
          </el-form-item>
          <el-form-item label="文章标题">
            <el-input v-model="ruleForm.title" />
          </el-form-item>
          <el-form-item label="文章介绍">
            <!-- <quill-editor v-model="ruleForm.free_content" class="editor" ref="editorRef1" :options="editorOption1">
                        </quill-editor> -->
            <div v-if="isVisible1">
              <WangEditor :content="contentData1" @submit="workVadeUpdate1" />
            </div>
          </el-form-item>
          <el-form-item label="付费内容">
            <!-- <quill-editor v-model="ruleForm.charge_content" class="editor" ref="editorRef2" :options="editorOption2">
                        </quill-editor> -->
            <div v-if="isVisible1">
              <WangEditor :content="contentData2" @submit="workVadeUpdate2" />
            </div>
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="ruleForm.price" />
          </el-form-item>
          <el-form-item label="是否付费">
            <el-radio-group v-model="ruleForm.is_free">
              <el-radio :label="1">付费</el-radio>
              <el-radio :label="2">不付费</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否不中退">
            <el-radio-group v-model="ruleForm.no_win_back">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="是否执行红黑">
            <el-radio-group v-model="ruleForm.exec_hh">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="是否显示">
            <el-radio-group v-model="ruleForm.status">
              <el-radio :label="1">显示</el-radio>
              <el-radio :label="2">隐藏</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item style="margin-top: 10px;" label="会员卡排序" prop="name">
            <el-input v-model="ruleForm.sort" />
          </el-form-item>

        </el-form>
        <div style="text-align: right;">
          <el-button @click="clickDelete">取消</el-button>
          <el-button type="primary" @click="clickConfirm(1)">确认</el-button>
        </div>
      </el-dialog>
    </div>
    <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
      <el-table-column prop="id" label="ID" align="center" />
      <el-table-column prop="category" label="赛事分类" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.category == 1">
            足球
          </span>
          <span v-if="scope.row.category == 2">
            篮球
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="pass_lx_text" label="过关类型" align="center" />
      <el-table-column prop="expert_info.nickname" label="专家" align="center" />
      <el-table-column prop="no_win_back" label="是否不中退" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.no_win_back == 1">
            是
          </span>
          <span v-if="scope.row.no_win_back == 2">
            否
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="is_free" label="是否付费" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.is_free == 1">
            是
          </span>
          <span v-if="scope.row.is_free == 2">
            否
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="show_lx_text" label="位置" align="center" />
      <el-table-column prop="title" label="标题" align="center" />
      <el-table-column prop="price" label="价格" align="center" />
      <el-table-column prop="create_time" label="是否置顶" align="center">
        <template slot-scope="scope">

          <el-switch :value="scope.row.if_top" :active-value="'1'" :inactive-value="'0'" active-color="#1890FF" inactive-color="#D8DADE" @change="topChange(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="handleButton1Click(scope.row)">修改</el-button>
          <el-button size="small" type="danger" @click="handleButton2Click(scope.row)">删除</el-button>
          <div style="width: 100%;">
            <el-button type="text" @click="modifyTap(scope.row)">如延期或中断，请点击</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="tabListPage">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="PageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <div>
      <!-- :before-close="modifyForm" -->
      <el-dialog title="修改红黑" :visible.sync="modifyShow">
        <!-- <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                </el-form> -->
        <div style="font-weight: bold;margin-bottom: 30px;">提示：哪场比赛延期或中断只需要选择那一场比赛即可</div>
        <div v-for="(item,index) in listData" :key="index" style="display: flex;margin-bottom: 50px;cursor: pointer;" @click="changeData(item)">
          <div style="width: 100px;text-align: right;">
            <span>{{ item.home_team_name }}</span>
          </div>
          <div style="margin: 0 30px;">
            <span>VS</span>
          </div>
          <div style="width: 100px;">
            <span>{{ item.away_team_name }}</span>
          </div>
        </div>
        <div style="text-align: right;">
          <el-button @click="clickDelete">取消</el-button>
          <el-button type="primary" @click="clickConfirm(2)">确认</el-button>
        </div>
      </el-dialog>
    </div>

    <div>
      <el-dialog title="修改" :visible.sync="dialogTableModify" :before-close="modifyForm">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="分类标签" prop="name">
            <el-select v-model="ruleForm.category" placeholder="请选择" @change="handleSelectChange">
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.label"
                :value="item.valuess"
              />
            </el-select>
          </el-form-item>
          <div @click="showExpertSelector = true">
            <el-form-item label="选择老师" prop="name">
              <el-select v-model="ruleForm.expert_id" style="pointer-events: none;" placeholder="请选择" @change="selectChangeExpert">
                <el-option
                  v-for="(item, index) in expertDataList"
                  :key="index"
                  :label="item.nickname"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="串子分类">
            <el-radio-group v-model="ruleForm.pass_lx">
              <el-radio :label="1">单场</el-radio>
              <el-radio :label="2">2串1</el-radio>
              <el-radio :label="3">3串1</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="显示类型">
            <el-radio-group v-model="ruleForm.show_lx">
              <el-radio :label="1">首页优选</el-radio>
              <el-radio :label="2">近期连红</el-radio>
              <el-radio :label="3">近期爆棚</el-radio>
              <el-radio :label="4">今日热卖</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="赛事修改">
            <div v-if="ruleForm.matches.length != 0">

              <div v-for="(items, index) in ruleForm.matches" :key="index" @click="toChange(items.match_id,items.match_time,items.lottery_id,items)">
                <div v-if="ruleForm.category==1">
                  <span>{{ items.home_team_name }} VS {{ items.away_team_name }}</span>
                </div>
                <div v-if="ruleForm.category==2">
                  <span>{{ items.away_team_name }} VS {{ items.home_team_name }}</span>
                </div>
                <div v-if="items.odds.length>1">
                  <el-checkbox-group v-model="checkboxGroup5" @change="changeOdds5">
                    <div>
                      <el-checkbox-button
                        v-for="(j, index) in items.odds[0]"
                        :key="index"
                        :label="j"
                        @change="changeOdds0(j)"
                      >
                        <div>{{ j.label }}</div>
                        <div>{{ j.value }}</div>
                      </el-checkbox-button>
                    </div>
                    <div>
                      <el-checkbox-button
                        v-for="(j, index) in items.odds[1]"
                        :key="index"
                        :label="j"
                        @change="changeOdds0(j)"
                      >
                        <div>{{ j.label }}</div>
                        <div>{{ j.value }}</div>
                      </el-checkbox-button>
                    </div>

                  </el-checkbox-group>
                </div>
                <div v-if="items.odds.length==1">
                  <el-checkbox-group v-model="checkboxGroup4" @change="changeOdds4">
                    <el-checkbox-button
                      v-for="(j, index) in items.odds[0]"
                      :key="index"
                      :label="j"
                      @change="changeOdds1(j)"
                    >
                      <div>
                        <span>{{ j.label }}</span>
                        <span>{{ j.value }}</span>
                      </div>
                    </el-checkbox-button>
                  </el-checkbox-group>
                </div>
              </div>
            </div>
            <el-button type="primary" @click="clickModifications">确认修改</el-button>
          </el-form-item>
          <el-form-item label="文章标题">
            <el-input v-model="ruleForm.title" />
          </el-form-item>
          <el-form-item label="文章介绍">
            <!-- <quill-editor v-model="ruleForm.free_content" class="editor" ref="editorRef3" :options="editorOption3">
                        </quill-editor> -->
            <div v-if="isVisible">
              <WangEditor :content="contentData3" @submit="workVadeUpdate3" />
            </div>
          </el-form-item>
          <el-form-item label="付费内容">
            <!-- <quill-editor v-model="ruleForm.charge_content" class="editor" ref="editorRef4" :options="editorOption4">
                        </quill-editor> -->
            <div v-if="isVisible">
              <WangEditor :content="contentData4" @submit="workVadeUpdate4" />
            </div>
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="ruleForm.price" />
          </el-form-item>
          <el-form-item label="是否付费">
            <el-radio-group v-model="ruleForm.is_free">
              <el-radio :label="1">付费</el-radio>
              <el-radio :label="2">不付费</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否不中退">
            <el-radio-group v-model="ruleForm.no_win_back">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="是否执行红黑">
            <el-radio-group v-model="ruleForm.exec_hh">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="是否显示">
            <el-radio-group v-model="ruleForm.status">
              <el-radio :label="1">显示</el-radio>
              <el-radio :label="2">隐藏</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item style="margin-top: 10px;" label="会员卡排序" prop="name">
            <el-input v-model="ruleForm.sort" />
          </el-form-item>
        </el-form>
        <div style="text-align: right;">
          <el-button @click="clickDelete">取消</el-button>
          <el-button type="primary" @click="clickConfirm(2)">确认</el-button>
        </div>
      </el-dialog>
    </div>
    <ExpertSelector
      :visible.sync="showExpertSelector"
      @select="handleExpertSelect"
    />
  </div>

</template>

<script>
import axios from 'axios'
import ExpertSelector from '@/components/ExpertSelector.vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import WangEditor from '@/components/richText'
import { get } from 'sortablejs'
import { hqMatcheList, expertList, getConfigList, hqOddsData, additionData, recommendationDatalist, recommendationDelete, modifyExpert } from '../../../libs/api'
import '../../assets/css/quillEditor.css'
import * as Quill from 'quill'
var fonts = [
  'SimSun',
  'SimHei',
  'Microsoft-YaHei',
  'KaiTi',
  'FangSong',
  'Arial',
  'Times-New-Roman',
  'sans-serif'
]
// 自定义字号的大小，注意下面的内容要和css里面对应上
var sizes = [false, '16px', '18px', '20px', '22px', '24px', '26px', '28px', '30px']
var Size = Quill.import('formats/size')
Size.whitelist = sizes
// var Font = Quill.import("formats/font");
const Font = Quill.import('attributors/style/font')
Font.whitelist = fonts // 将字体加入到白名单
Quill.register(Font, true)
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ 'header': 1 }, { 'header': 2 }],
  [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: '-1' }, { indent: '+1' }],
  [{ size: [false, '16px', '18px', '20px', '22px', '24px', '26px', '28px', '30px'] }], // 配置字号
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], // 显示字体选择
  [{ align: [] }], // 对齐方式-----
  ['clean'], // 清除文本格式-----
  ['link', 'image', 'video'] // 链接、图片、视频-----
]
export default {
  // components: { Editor, Toolbar },
  components: {
    WangEditor,
    ExpertSelector
  },
  data() {
    return {
      showExpertSelector: false,
      isVisible: false,
      isVisible1: false,
      contentData1: '',
      contentData2: '',
      contentData3: '',
      contentData4: '',
      id: this.$route.query.id,
      content: '',
      fbAll: [{
        id: 1,
        nickname: '足球'
      }, {
        id: 2,
        nickname: '篮球'
      }],
      yOrN: [{
        id: 1,
        nickname: '是'
      }, {
        id: 2,
        nickname: '否'
      }],
      dialogTableVisible: false,
      dialogVisible: false,
      dialogTableModify: false,
      valuess: '',
      values: '',
      value: '',
      sortCard: '',
      content: '',
      dialogImageUrl: '',
      innerVisible: false,
      checkboxGroup1: [],
      checkboxGroup2: [],
      indexData: ['1.6', '1.7', '1.8'],
      indexData1: ['1.99', '1.9', '1.77'],
      inputData: '',
      tableData: [],
      rules: {
        // name: [
        //     { required: true, message: '请输入名称', trigger: 'blur' },
        // ],
      },
      editorOption1: {
      	// 主题
        theme: 'snow',
        modules: {
          toolbar: toolbarOptions
        }
      },
      editorOption2: {
      	// 主题
        theme: 'snow',
        modules: {
          toolbar: toolbarOptions
        }
      },
      editorOption3: {
      	// 主题
        theme: 'snow',
        modules: {
          toolbar: toolbarOptions
        }
      },
      editorOption4: {
      	// 主题
        theme: 'snow',
        modules: {
          toolbar: toolbarOptions
        }
      },
      ruleForm: {
        category: '',
        expert_id: '',
        show_lx: 1,
        pass_lx: 1,
        title: '',
        free_content: '',
        charge_content: '',
        price: '',
        is_free: 1,
        no_win_back: 2,
        exec_hh: 2,
        status: 1,
        sort: '',
        matches: ''
      },
      listing: [
        {
          value: '选项1',
          label: '上架'
        }, {
          value: '选项2',
          label: '不上架'
        }
      ],
      options: [{
        valuess: 1,
        label: '足球赛事'
      }, {
        valuess: 2,
        label: '篮球赛事'
      }],
      dataList: [],
      expertDataList: [],
      yuce: [],
      radio1: {},
      typeData: '',
      oddsDataList: [],
      max: 2,
      fanxian: [],
      fanxians: [],
      oodMatchData: {},
      oodMatchDatas: {},
      allOodData: [],
      currentPage: 1,
      totalCount: 1,
      PageSize: 5,
      pageSizes: [5, 10],
      alltabData: [],
      open: false,
      checkboxGroup5: [],
      checkboxGroup4: [],
      saishi: [],
      y_match: {
        time: '',
        id: '',
        gid: ''
      },
      dataArrS: [],
      gogos: [],
      inputName: '',
      fbData: '',
      ynData: '',
      titleData: '',
      editor: null,
      html: '<p>hello</p>',
      toolbarConfig: { },
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
        }
      },
      mode: 'default', // or 'simple'
      quill1: null,
      quill2: null,
      quill3: null,
      quill4: null,
      modifyShow: false,
      listData: [],
      matchID: ''
    }
  },
  created() {
    this.getExpertList()
    this.getConfigListData()
    this.getRecommendationDatalist()
    //     this.quill1 = new Quill(this.$refs.editorRef1, {
    // });
    // this.quill2 = new Quill(this.$refs.editorRef2, {
    // });
    // this.quill3 = new Quill(this.$refs.editorRef3, {
    // });
    //     this.quill4 = new Quill(this.$refs.editorRef4, {
    // });
  },
  methods: {
    handleExpertSelect(v) {
      // this.videoForm.expert = v;
      if (this.dialogTableModify || this.dialogTableVisible) {
        this.ruleForm.expert_id = v.id
      } else {
        this.inputName = v.id
        this.getRecommendationDatalist()
      }
    },
    topChange(v) {
      if (v.if_top == '0') {
        v.if_top = '1'
      } else {
        v.if_top = '0'
      }
      additionData(v)
    },
    async getModify() {
      await axios.get('https://api.zctj16888.com/admin/v1/Execute/single', { params: { match_id: this.matchID }}).then(res => {
        console.log(res)
      })
    },
    changeData(e) {
      console.log(e)
      this.matchID = e.match_id
      this.$confirm('是否因为该场赛事延期或中断执行红黑？！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.getModify()
        this.$message({
          type: 'info',
          message: '执行成功'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消执行'
        })
      })
    },
    modifyTap(e) {
      console.log(e)
      this.modifyShow = true
      this.listData = e.matchList
    },
    // 自定义上传图片接口

    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    handleChange(value) {
      this.getRecommendationDatalist()
      console.log(value)
    },
    handleChangeType(value) {
      this.getRecommendationDatalist()
    },
    handleChangeYesOrNo(value) {
      this.getRecommendationDatalist()
    },
    searchExpert() {
      this.getRecommendationDatalist()
    },
    toChange(id, time, lid, data) {
      this.y_match.id = id
      this.y_match.time = time
      this.y_match.gid = lid
      this.gogos.push(data)
      console.log(this.gogos)
    },
    clickModifications() {
      // this.quill3.destroy();
      // this.quill4.destroy();
      // let data = {}
      // console.log(this.ruleForm)
      // console.log(this.ruleForm.matches)
      // let dataArr = {}
      // dataArr.match_id = this.y_match.id
      // dataArr.match_time = this.y_match.time
      // dataArr.lot_lx = this.y_match.gid
      // dataArr.odds = this.ruleForm.matches[0].odds
      //     this.dataArrS.push(dataArr)
      // if(this.ruleForm.matches.length==1){
      //      dataArr.odds = this.ruleForm.matches[0].odds
      //     this.dataArrS.push(dataArr)
      // }

      if (this.ruleForm.matches.length == 1) {
        const uzi = {}
        const wuzi = []
        console.log(this.ruleForm)
        uzi.lot_lx = this.ruleForm.matches[0].lottery_id
        uzi.match_time = this.ruleForm.matches[0].match_time
        uzi.match_id = this.ruleForm.matches[0].match_id
        uzi.odds = this.ruleForm.matches[0].odds
        wuzi.push(uzi)
        this.dataArrS = wuzi
      } else {
        const uniqueArray = this.gogos.filter((obj, index, self) =>
          index === self.findIndex((o) => (
            o.id === obj.id
          ))
        )
        const newArray = uniqueArray.map(item => ({ match_id: item.match_id, match_time: item.match_time, lot_lx: item.lottery_id, odds: item.odds }))
        this.dataArrS = newArray

        this.gogos = []
        console.log(this.dataArrS)
        this.dialogTableVisible = false
      }
    },
    changeOdds5(e) {
      console.log(e)
      // e.map(item => {
      //     item.is_recommend = true
      // })
      // this.checkboxGroup5 = e
      // console.log(this.checkboxGroup5)
    },
    changeOdds6(e) {
      e.is_recommend = !e.is_recommend
      console.log(e)
    },
    changeOdds7(e) {
      e.is_recommend = !e.is_recommend
    },
    changeOdds0(e) {
      e.is_recommend = !e.is_recommend
    },
    changeOdds1(e) {
      e.is_recommend = !e.is_recommend
    },
    changeOdds4(e) {
      console.log(e)
      e.map(item => {
        item.is_recommend = true
      })
      this.checkboxGroup4 = e
    },
    modifyForm() {
      this.dialogTableModify = false
      this.checkboxGroup5 = []
      this.gogos = []
      this.isVisible = false
      // this.quill3.destroy();
      // this.quill4.destroy();
      Object.assign(this.ruleForm, {
        category: '',
        expert_id: '',
        show_lx: '',
        pass_lx: '',
        title: '',
        free_content: '',
        charge_content: '',
        price: '',
        is_free: '',
        no_win_back: '',
        exec_hh: '',
        status: '',
        sort: '',
        matches: ''
      })
    },
    closeForm() {
      // this.isVisible1 = false
      // console.log("关闭")
      //             this.$nextTick(()=>{
      //         this.$refs.ruleForm.resetFields();
      //    })
      console.log(888)
      Object.assign(this.ruleForm, {
        category: '',
        expert_id: '',
        show_lx: '',
        pass_lx: '',
        title: '',
        free_content: '',
        charge_content: '',
        price: '',
        is_free: '',
        no_win_back: '',
        exec_hh: '',
        status: '',
        sort: '',
        matches: ''
      })
      this.fanxian = []
      this.fanxians = []
      this.dialogTableVisible = false// 关闭对话框
      this.isVisible1 = false
    },
    closeFormData() {
      this.innerVisible = false
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val
      this.getRecommendationDatalist()
    },
    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val
      // 点击每页显示的条数时，显示第一页
      console.log(val)
      this.PageSize = val
      // 改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1
      this.getRecommendationDatalist()
    },
    getRecommendationDatalist() {
      recommendationDatalist({
        page: this.currentPage,
        limit: this.PageSize,
        expert_id: this.inputName,
        category: this.fbData,
        title: this.titleData,
        no_win_back: this.ynData,
        sf_pt: 2
      }).then(res => {
        console.log(res)
        this.tableData = res.data.list
        this.alltabData = res.data.list
        this.totalCount = res.data.total
      })
    },
    ConfirmOods() {
      console.log(this.allOodData)
      this.innerVisible = false
      Object.assign(this.ruleForm, {
        yuce: ''
      })
      if (this.checkboxGroup1.length == 0) {
        this.$alert('请选择相关赛事结果', '提示信息', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${action}`
            })
          }
        })
        return
      }
      this.oodMatchData.match_id = this.allOodData.match_id
      this.oodMatchData.lot_lx = this.allOodData.lot_lx
      this.oodMatchData.match_time = this.allOodData.match_time
      this.oodMatchData.odds = this.oddsDataList

      this.oodMatchDatas.match_id = this.allOodData.match_id
      this.oodMatchDatas.lot_lx = this.allOodData.lot_lx
      this.oodMatchDatas.match_time = this.allOodData.match_time
      this.oodMatchDatas.odds = this.oddsDataList

      this.checkboxGroup1 = []
      this.fanxian.push(this.oodMatchData)
      this.fanxians.push(this.oodMatchDatas)
      this.oodMatchDatas = {}
      this.oodMatchData = {}
      this.oddsDataList = []
      this.dataList = []
      this.inputData = ''
      console.log(this.fanxian)
    },
    changeOdds(e) {
      console.log(e)
      e.map(item => {
        item.is_recommend = true
        // item.is_recommend = !item.is_recommend
      })
      this.checkboxGroup1 = e
      console.log(this.oddsDataList)
    },
    changeYuce(e) {
      console.log(e)
      this.radio1 = {}
      // console.log(this.ruleForm)

      this.typeData = e
      if (this.radio1 != {}) {
        hqOddsData({
          match_id: this.radio1.match_id,
          lx: this.ruleForm.category,
          lot_lx: this.typeData
        }).then(res => {
          console.log(res)
          if (this.typeData == 1) {
            this.oddsDataList = res.data.odds
          } else {
            this.oddsDataList = res.data.odds[0]
          }
          this.allOodData = res.data
        })
      }
    },

    changeMatch(e) {
      this.radio1 = e
      console.log(this.radio1)
      this.open = true
      this.oodMatchData.home_team_name = e.home_team_name
      this.oodMatchData.away_team_name = e.away_team_name
      hqOddsData({
        match_id: this.radio1.match_id,
        lx: this.ruleForm.category,
        lot_lx: this.typeData
      }).then(res => {
        console.log('队伍名称', res)
        if (this.typeData == 1) {
          this.oddsDataList = res.data.odds
        } else {
          this.oddsDataList = res.data.odds
          console.log('78787', this.oddsDataList)
        }
        this.allOodData = res.data
      })
    },
    // 通用接口
    getConfigListData() {
      getConfigList({

      }).then(res => {
        console.log('通用', res)
        this.yuce = res.data.lotLxList
      })
    },
    // 获取专家
    getExpertList() {
      expertList({
        page: 1,
        limit: 1000
      }).then(res => {
        this.expertDataList = res.data.list
      })
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp * 1000)// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      var h = date.getHours() + ':'
      var m = date.getMinutes()
      // var s = date.getSeconds();
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      return M + D + h + m
    },
    handleSelectChange(value) {
      console.log(this.ruleForm)
      // this.valuess = value
    },
    selectChangeExpert(value) {
      console.log(value)
      console.log(this.ruleForm)
    },
    getInput() {
      hqMatcheList({
        page: 1,
        limit: 10,
        lx: this.ruleForm.category,
        name: this.inputData
      }).then(res => {
        console.log(res)
        this.dataList = res.data.list.data
      })
    },
    clickType(value) {
      console.log(value)
      this.innerVisible = true
    },
    handleButtonAdd() {
      this.ruleForm.expert_id = ''
      this.dialogTableVisible = true
      this.ruleForm.show_lx = 1
      this.ruleForm.pass_lx = 1
      this.ruleForm.is_free = 1
      this.ruleForm.no_win_back = 2
      this.ruleForm.exec_hh = 2
      this.ruleForm.status = 1
      this.isVisible1 = true
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    workVadeUpdate1(content) {
      console.log(content)
      this.ruleForm.free_content = content
    },
    workVadeUpdate2(content) {
      console.log(content)
      this.ruleForm.charge_content = content
    },
    workVadeUpdate3(content) {
      console.log(content)
      this.ruleForm.free_content = content
    },
    workVadeUpdate4(content) {
      console.log(content)
      this.ruleForm.charge_content = content
    },
    clickConfirm(e) {
      const that = this

      //     that.content = '<p><br/></p>'
      //     that.$confirm('是否确认添加该推荐?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //     that.$message({
      //     type: 'success',
      //     message: '删除成功!'
      //   });
      // //   that.workVadeUpdate()
      // console.log(that.ruleForm)
      // }).catch(() => {
      //     that.$message({
      //     type: 'info',
      //     message: '已取消删除'
      //   });
      // });
      if (this.ruleForm.price <= 0) {
        that.$message({
          type: 'error',
          message: '填写金额不能少于0!'
        })
        return false
      }

      if (e == 2) {
        this.dialogTableModify = false
        this.isVisible = false
        console.log(this.dataArrS)

        additionData({
          category: this.ruleForm.category,
          expert_id: this.ruleForm.expert_id,
          show_lx: this.ruleForm.show_lx,
          pass_lx: this.ruleForm.pass_lx,
          title: this.ruleForm.title,
          free_content: this.ruleForm.free_content,
          charge_content: this.ruleForm.charge_content,
          price: this.ruleForm.price,
          is_free: this.ruleForm.is_free,
          no_win_back: this.ruleForm.no_win_back,
          exec_hh: this.ruleForm.exec_hh,
          status: this.ruleForm.status,
          sort: this.ruleForm.sort,
          matches: JSON.stringify(this.dataArrS),
          id: this.ruleForm.id,
          sf_pt: 2
        }).then(res => {
          if (res.code != 1) {
            that.$message({
              type: 'error',
              message: res.msg
            })
            return false
          }
          that.dialogTableVisible = false
          console.log(res)
          Object.assign(this.ruleForm, {
            category: '',
            expert_id: '',
            show_lx: '',
            pass_lx: '',
            title: '',
            free_content: '',
            charge_content: '',
            price: '',
            is_free: '',
            no_win_back: '',
            exec_hh: '',
            status: '',
            sort: '',
            matches: ''
          })
          this.dataArrS = []
          this.getRecommendationDatalist()
        })
      } else {
        this.isVisible1 = false
        additionData({
          category: this.ruleForm.category,
          expert_id: this.ruleForm.expert_id,
          show_lx: this.ruleForm.show_lx,
          pass_lx: this.ruleForm.pass_lx,
          title: this.ruleForm.title,
          free_content: this.ruleForm.free_content,
          charge_content: this.ruleForm.charge_content,
          price: this.ruleForm.price,
          is_free: this.ruleForm.is_free,
          no_win_back: this.ruleForm.no_win_back,
          exec_hh: this.ruleForm.exec_hh,
          status: this.ruleForm.status,
          sort: this.ruleForm.sort,
          matches: JSON.stringify(this.fanxians),
          sf_pt: 2
        }).then(res => {
          console.log(res)

          if (res.code != 1) {
            that.$message({
              type: 'error',
              message: res.msg
            })
            return false
          }
          that.dialogTableVisible = false
          Object.assign(this.ruleForm, {
            category: '',
            expert_id: '',
            show_lx: '',
            pass_lx: '',
            title: '',
            free_content: '',
            charge_content: '',
            price: '',
            is_free: '',
            no_win_back: '',
            status: '',
            sort: '',
            matches: ''
          })
          this.fanxians = []
          this.fanxian = []
          this.dataArrS = []
          console.log('这是反显', this.fanxians)
          this.getRecommendationDatalist()
        })
      }

      console.log(this.ruleForm)
    },
    clickClose() {
      this.open = false
    },
    closeFormOpen() {
      this.open = false
      //         Object.assign(this.ruleForm, {
      //             yuce:''
      //   });
      this.checkboxGroup1 = []
    },
    clickDelete() {
      // console.log('7777')
      this.isVisible = false
      this.isVisible1 = false
      this.dialogTableModify = false
      this.dialogTableVisible = false
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handleButton1Click(row) {
      console.log(row)
      this.isVisible = true
      this.ruleForm.category = row.category
      this.ruleForm.expert_id = row.expert_id
      this.ruleForm.show_lx = row.show_lx
      this.ruleForm.pass_lx = row.pass_lx
      this.ruleForm.title = row.title
      this.ruleForm.free_content = row.free_content
      this.ruleForm.charge_content = row.charge_content
      this.ruleForm.price = row.price
      this.ruleForm.is_free = row.is_free
      this.ruleForm.no_win_back = row.no_win_back
      this.ruleForm.exec_hh = row.exec_hh
      this.ruleForm.status = row.status
      this.ruleForm.sort = row.sort
      this.ruleForm.matches = row.matchList
      this.ruleForm.id = row.id
      this.dialogTableModify = true
      this.contentData3 = row.free_content
      this.contentData4 = row.charge_content
      console.log('免费', this.contentData3)
      console.log('付费', this.contentData4)
      for (var i = 0; i < this.ruleForm.matches.length; i++) {
        if (this.ruleForm.matches[i].lottery_id == 1) {
          if (this.ruleForm.category == 1) {
            this.ruleForm.matches[i].odds[0].map(item => {
              if (item.is_recommend == true) {
                // item.is_recommend=false
                console.log('我执行了')
                this.checkboxGroup5.push(item)
              }
            })
            console.log('我执行了', this.ruleForm.matches[i].odds)

            this.ruleForm.matches[i].odds[1].map(item => {
              if (item.is_recommend == true) {
                // item.is_recommend=false

                this.checkboxGroup5.push(item)
              }
            })
          } else {
            this.ruleForm.matches[i].odds[0].map(item => {
              if (item.is_recommend == true) {
                this.checkboxGroup4.push(item)
                // item.is_recommend=false
              }
            })
          }
        } else {
          this.ruleForm.matches[i].odds[0].map(item => {
            if (item.is_recommend == true) {
              this.checkboxGroup4.push(item)
              // item.is_recommend=false
            }
          })
        }
      }
      console.log(this.ruleForm.matches)
      const newArray = this.ruleForm.matches.map(item => ({ match_id: item.match_id, match_time: item.match_time, lot_lx: item.lottery_id, odds: item.odds }))
      this.dataArrS = newArray
      console.log(newArray)
    },
    handleButton2Click(row) {
      console.log(row)
      this.$confirm('此操作将永久删除该推荐, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        recommendationDelete({
          id: row.id
        }).then(res => {
          console.log(res)
          this.getRecommendationDatalist()
        })
      }).catch(() => {

      })
    }
  }

}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style>
.addBtn {
    margin: 30px 0 30px 30px;
}

.inout {
    display: flex;
    align-items: center;
}
.ql-clipboard {
    position: fixed;
    display: none;
    left: 50%;
    top: 50%;
  }
</style>
